<template>
	<view>
		<my-search :bgcolor="'#ffffff'" :boxbgcolor="'#eeeeee'"></my-search>
		<u-sticky bgColor="#fff">
			<view class="lazyServiceType" style="display: flex; justify-content: space-between; margin-right: 10px">
				<u-tabs scrollable="true" :list="lazyServiceType" @change="handleTabChange" lineWidth='30px' 
				itemStyle="height: 38px; font-size: 14px; padding: 0 10px"></u-tabs>
				<u-icon name="list" size="20px" bold="true" label="筛选" @click="handleSelectList" style="padding-bottom;: 5px"></u-icon>
			</view>
		</u-sticky>

		<view class="lazyServiceCardList">
			<lazyServiceCard></lazyServiceCard>
			<lazyServiceCard></lazyServiceCard>
			<lazyServiceCard></lazyServiceCard>
		</view>
		<fabButton></fabButton>
	</view>
</template>

<script>
	import lazyServiceCard from '../../components/lazyService/card/card.vue';
	import fabButton from '../../components/lazyService/fabButton/fabButton.vue'
	export default {
		name: "lazyService",
		components: {
			lazyServiceCard,
			fabButton,
		},
		data() {
			return {
				lazyServiceType: [{
					name: '全部订单',
					url: 'allorder'
				}, {
					name: '我的发布',
					url: 'myorder'
				}, {
					name: '我的接单',
					url: 'mytask'
				}],
			};
		},
		methods: {
			handleTabChange(index) {
				console.log("change to" + JSON.stringify(index))
				console.log("change to" + JSON.stringify(index.name) + '--' + JSON.stringify(index.url))
			},
			handleSelectList() {
				console.log("筛选列表待完善")
			}
		}
	}
</script>

<style lang="scss">
	.lazyServiceCardList {
		background-color: #f7f7f7;
		padding-top: 5px;
	}
</style>